

<!--新的页面-->
<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
      <template slot="table-action">
        <el-button type="primary" icon="el-icon-plus"  @click="addNotice">新增</el-button>
        <el-button type="success" icon="el-icon-success" @click="publicStatus">发布</el-button>
        <el-button type="info" @click="loseStatus">失效</el-button>
      </template>
    </table-ext>
   </div>
</template>
<script>
  import TableExt from '@/components/common/table-ext/table-ext.vue';
  import TableIcon from '@/components/common/table-ext/table-icon';
   import qs from 'qs';
  export default {
   // 引入自定义表格组件
    components: {
      'table-ext': TableExt
    },
    data() {
      return {
       isShow: false,
       formLabelWidth: '120px',
        checkIds: [],
        config: { // 页面共通配置
          title: '公告管理', //页面标题
          isPage: true, //是否分页
          isNo: false, //是否显示序号
          selection: true, //是否显示复选框
          crudMapping: { // CRUD方法
            query: {
              url: this.lib.config.host.system + '/system/notice/query',
            },
              delete: {
                url: this.lib.config.host.system + '/system/notice/delete',
              }
          }
        },
          // 查询表单配置
        searchForm: [{
          //显示标签
          label: '标题',
          //数据字段
          key: 'noticeTitle',
          //标签类型
          type: 'input'
        }, {
          label: '类型',
          key: 'noticeType',
          type: 'select',
          dict: [{
            value: '1',
            label: '站内信息'
          }, {
            value: '2',
            label: '门户信息'
          }]

        }, {
          label: '内容类别',
          key: 'contentType',
          type: 'select',
          dict: [{
            value: '1',
            label: '采购公告'
          }, {
            value: '2',
            label: '网站公告'
          },
           {
            value: '3',
            label: '新闻政策'
          },
          {
            value: '4',
            label: '用户须知'
          }]
        },{
          label: '发布人',
          key: 'publishUserName',
          type: 'input'
        },{
          label: '发布状态',
          key: 'publishStatus',
          type: 'select',
          dict: [{
            value: '0',
            label: '未发布'
          }, {
            value: '1',
            label: '已发布'
          }]
        },{
          label: '是否有效',
          key: 'validFlag',
          type: 'select',
           dict: [{
            value: '0',
            label: '无效'
          }, {
            value: '1',
            label: '有效'
          }]
        }], 
              // 表格列定义
        columns:[
          { 
          label: '标题', // 表格header
          render:(createElement, params)=>{ // 动态渲染，click事件示例
            let _this = this;
            return createElement('div', {}, 
            [createElement('el-button', {
                props: {
                  type: 'text',
                },
                on: {
                  click() {
                     _this.$router.push({
                        path: '/Index/System/AddNotice',
                        query: {
                            noticeId: params.row.id
                          }                    
                      })
                  }
                }
              }, params.row.noticeTitle)
            ]);
          }
        },
        {
          label: '类型',
          key: 'noticeType',
          align :'center',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            if (params.row.noticeType == 1) {
              return createElement('div', '站内信息');
            }
            else if (params.row.noticeType == 2) {
              return createElement('div', '门户信息');
            }
          }
        },
        {
          label: '门户类容类别',
          key: 'contentType',
          align :'center',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            if (params.row.contentType == 1) {
              return createElement('div', '采购公告');
            }
            else if (params.row.contentType == 2) {
              return createElement('div', '网站公告');
            }
            else if (params.row.contentType == 3) {
              return createElement('div', '新闻政策');
            }
            else if (params.row.contentType == 4) {
              return createElement('div', '用户须知');
            }
          }
        },
          { // 表格列定义
            label: '附件名称', // 表格header
            width: '300',
            align :'center',
            render: (h, params) => { // 动态渲染，click事件示例
              let _this = this;
              return h('div', {}, [
                h('el-button', {
                  props: {
                    type: 'text',
                  },
                  on: {
                    click() {
                      _this.downloadFiles(params.row.attFileUrl,params.row.attFileName);
                    }
                  }
                }, params.row.attFileName)          
              ]);
            }
          },
        {
          label: '发布状态',
          key: 'publishStatus',
          align :'center',
          width: 80,
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.publishStatus,
                titles: [{status:0,title:'未发布'},{status:1,title:'已发布'}]
            }});
          }
        },{
          label: '发布日期',
          key: 'publishTime',
          align :'center',
        },{
          label: '发布人',
          key: 'publishUserName',
          align :'center'
        },{
          label: '失效状态',
          key: 'validFlag',
          align :'center',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.validFlag,
                titles: [{status:0,title:'失效'},{status:1,title:'有效'}]
            }});
          }
        }]
      };
    },
    mounted() {

    },
    methods: {
      publicStatus(){
        //发布状态
        let checkRows = this.$refs['tableExt'].multipleSelection;
        checkRows.map(item => {
          console.log(item.id);
          this.checkIds.push(item.id);
        });

         this.axios.post(this.lib.config.host.system + "/system/notice/publish", this.checkIds)
          .then((response) => {
          this.$refs['tableExt'].refreshTable();
            this.$message({
              type: 'success',
              message: '发布成功!'
            });

          })
          .catch((error) => {
            this.$message({
              type: 'info',
              message: '发布失败!'
            });
          });
        this.checkIds = []
      },
        loseStatus(){
        //失效状态
        let checkRows = this.$refs['tableExt'].multipleSelection;
        checkRows.map(item => {
          console.log(item.id);
          this.checkIds.push(item.id);
        });
         this.axios.post(this.lib.config.host.system + "/system/notice/invalid", this.checkIds)
          .then((response) => {
           this.$refs['tableExt'].refreshTable();
            this.$message({
              type: 'success',
              message: '失效成功!'
            });
          })
          .catch((error) => {
            this.$message({
              type: 'info',
              message: '失效失败!'
            });
          });
        this.checkIds = []
      },
      batchDelete(){
        //删除操作
       let checkRows = this.$refs['tableExt'].multipleSelection;
        checkRows.map(item => {
          console.log(item.id);
          this.checkIds.push(item.id);
        });
         this.axios.post(this.lib.config.host.system + "/system/notice/delete", this.checkIds)
          .then((response) => {
           this.$refs['tableExt'].refreshTable();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

          })
          .catch((error) => {
            this.$message({
              type: 'info',
              message: '删除失败!'
            });
          });
        this.checkIds = []
      },
      addNotice(){
        this.$router.push({
              path: '/Index/System/AddNotice' ,
              query: {
                    noticeId: ''
                  }                     
            })
      },
       downloadFiles(filePath,fileName){
         this.downloadFile(filePath, fileName);
      }
    }
  }

</script>
<style>


</style>
